<!--
 * Description: CBOM Quote List
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/10/29 15:35
-->

<template>
  <div v-loading="isRequesting" class="detail-data" style="height: 100%">
    <div class="top">
      <el-page-header content="详情页面" @back="goBack" />
      <div>
        <el-button :disabled="rowData.isQuote" size="small" type="warning" @click="getAskPrice">
          开始询价
        </el-button>
        <el-button :disabled="rowData.isQuote" size="small" type="primary" @click="save('save')">
          {{ $t('button.save') }}
        </el-button>
        <el-button :disabled="rowData.isQuote" size="small" type="success" @click="save('commit')">
          {{ $t('button.submit') }}
        </el-button>
      </div>
    </div>
    <div class="bottom">
      <VirtualTable childrenAlisas="children" :rowStyle="rowStyle" :table="tableData">
        <!-- 层级 -->
        <Cell fix="left" label="层级" prop="level" />
        <!-- 行号 -->
        <Cell label="行号" prop="rowNumber" />
        <!-- SAP料号 -->
        <Cell label="SAP料号" prop="partNumber" />
        <!-- SAP物料组 -->
        <Cell label="SAP物料组" prop="materialGroup" />
        <!-- SAP料件类型 -->
        <Cell label="SAP料件类型" prop="materialType" />
        <!-- SAP物料说明 -->
        <Cell label="SAP物料说明" prop="partDescription" :width="500" />
        <!-- 替代料组 -->
        <Cell label="替代料组" prop="alternativeItemGroup" />
        <!-- 计算标识 -->
        <Cell label="计算标识" prop="calculateStatus" />
        <!-- CBOM版本 -->
        <Cell label="CBOM版本" prop="cbomVersion" />
        <!-- 总金额 -->
        <Cell label="总金额" prop="cost" />
        <!-- 料件单价 -->
        <Cell label="料件单价" prop="pirPrice" />
        <!-- 采购类型 -->
        <Cell label="采购类型" prop="procurementMethod" />
        <!-- 料件用量 -->
        <Cell label="料件用量" prop="ratio" />
        <!-- SAP采购员代码 -->
        <Cell label="SAP采购员代码" prop="sourcerCode" />
        <!-- 类别 -->
        <Cell label="类别" prop="tower" />
        <!-- Tracking SKU -->
        <Cell label="Tracking SKU" prop="trackingSku" />
        <!-- 替代料使用比例 -->
        <Cell label="替代料使用比例" min-width="160px" prop="usageProbability" />
        <!-- Cost -->
        <Cell label="Cost" prop="cost" />
        <!-- Base Cost -->
        <Cell label="Base Cost" prop="baseCost" />
        <!-- CBOM Cost -->
        <Cell label="CBOM Cost" prop="cbomCost" />
        <!-- TEC Pool Cost -->
        <Cell label="TEC Pool Cost" prop="tecPoolCost" />
        <!-- EC/DFC Cost -->
        <Cell label="EC/DFC Cost" prop="ecDfcCost" />
        <!-- FD Cost -->
        <Cell label="FD Cost" prop="fdCost" />
        <!--操作列-->
        <Cell v-if="!rowData.isQuote" fix="right" :label="$t('table.operate')">
          <template slot-scope="scope">
            <el-link icon="el-icon-coin" @click="handlerQuote(scope.row)">报价</el-link>
          </template>
        </Cell>
      </VirtualTable>
    </div>
  </div>
</template>
<script>
import Cell from '@/widgets/VirtualTable/Cell'
import VirtualTable from '@/widgets/VirtualTable/Table'
import { cbomInfoDetailList } from '@/api/cbom/info'
import { cbomQuoteSavePrice, cbomQuoteAskPrice } from '@/api/cbom/quote'
export default {
  name: 'CbomDetailData',

  components: { Cell, VirtualTable },

  props: {
    // 行数据
    rowData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 表格数据
      tableData: [],
      // 颜色分层
      colorData: {
        1: '#B0E0E6',
        2: '#E0FFFF',
        3: '#90EE90',
        4: '#FFDEAD',
        5: '#FFFAF0',
        6: '#F5F5F5'
      }
    }
  },
  created() {
    this.getDetailData()

    this.$bus.$on('cbom-row-edit', quoteRowData => {
      this.editTreeNode(quoteRowData, this.tableData)
      this.tableData = this.$deepCopy(this.tableData)
    })
  },

  beforeDestroy() {
    this.$bus.$off('cbom-row-edit')
  },

  methods: {
    rowStyle(index, row) {
      return {
        backgroundColor: this.colorData[row.level]
      }
    },
    // 拉取详情数据
    async getDetailData() {
      try {
        this.isRequesting = true
        const res = await cbomInfoDetailList({
          trackingSku: this.rowData.trackingSku,
          cbomVersion: this.rowData.cbomVersion
        })
        this.tableData = res.data
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    // 返回
    goBack() {
      this.$emit('cancel')
    },
    // 报价
    handlerQuote(quoteRowData) {
      this.$bus.$emit('cbom-quote-edit', quoteRowData)
    },

    // 循环遍历tree找到节点并修改
    editTreeNode(quoteRowData, list = []) {
      for (let i = 0, len = list.length; i < len; i++) {
        if (list[i].id === quoteRowData.id) {
          list[i].cost = quoteRowData.cost
          list[i].ecDfcCost = quoteRowData.ecDfcCost
          list[i].fdCost = quoteRowData.fdCost
          list[i].baseCost = quoteRowData.baseCost
          list[i].cbomCost = quoteRowData.cbomCost
          return
        } else {
          if (list[i].children) {
            this.editTreeNode(quoteRowData, list[i].children)
          } else {
            continue
          }
        }
      }
    },

    // tree展开平铺成list
    openTree(tree = [], list = []) {
      for (let i = 0, len = tree.length; i < len; i++) {
        list.push({
          id: tree[i].id,
          baseCost: tree[i].baseCost,
          cbomCost: tree[i].cbomCost,
          ecDfcCost: tree[i].ecDfcCost,
          fdCost: tree[i].fdCost,
          tecPoolCost: tree[i].tecPoolCost
        })
        if (tree[i].children) {
          this.openTree(tree[i].children, list)
        }
      }
    },

    // 询价
    async getAskPrice() {
      try {
        const result = await cbomQuoteAskPrice(this.rowData, { msgSuccess: true, msgError: true })
        this.tableData = result.data
      } catch (error) {
        console.log(error)
      }
    },

    async save(type) {
      try {
        this.isRequesting = true
        const priceList = []
        this.openTree(this.tableData, priceList)
        await cbomQuoteSavePrice(
          {
            ...this.rowData,
            type: type,
            infoDetailPrices: priceList
          },
          {
            msgSuccess: true,
            msgError: true
          }
        )
        this.$bus.$emit('cbom-quote-refresh', this.rowData)
        this.isRequesting = false
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-data {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  overflow: hidden;
}
.top {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/deep/ .el-page-header__content {
  font-size: 16px;
}
.bottom {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0px;
}

/deep/ .no-border {
  border-right: 1px solid transparent !important;
}

/deep/.el-table__row.hover-row > td {
  color: red;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  background-color: rgba(0, 0, 0, 0) !important;
}
</style>
